<template>
  <a-modal
  class="function-modal"
  :visible="visible"
  :title="title"
  :maskClosable="false"
  :destroyOnClose="true"
  :keyboard="false"
  :closable="false"
  :confirmLoading="confirmLoading"
  width="70%"
  @cancel="closeModal(false)"
  @ok="handleSubmit">
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :defaultParams="defaultParams"
      :headParams="headParams"
      :defaultSelectedRowKeys="chosenIds"
      :rowSelectionSelect="rowSelectionSelect"
      :rowSelectionChange="rowSelectionChange"
      :form="form">
      <!-- 搜索条件 -->
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="商品名称">
            <a-input v-decorator="['goodsName']" placeholder="请输入商品名称">
            </a-input>
          </a-form-item>
          <a-form-item label="收货人">
            <a-input v-decorator="['userName']" placeholder="收货人姓名/手机号">
            </a-input>
          </a-form-item>
          <a-form-item label="提交时间">
            <fast-range-picker
              allowClear
              v-decorator="['createStartDate-createEndDate']"
            >
            </fast-range-picker>
          </a-form-item>
        </a-form>
      </template>
      <!-- 操作栏 -->
      <template slot="oprationRow">
        <permission authority="">
          <a-button :loading="confirmLoading" type="primary" @click="batchAll()">全部发货</a-button>
        </permission>
      </template>
      <!-- 表格行操作 record -->
      <template slot="tableOperation" slot-scope="{  }">
         <a-space></a-space>
      </template>
    </search-table>
    <template slot="footer">
      <a-button key="back" @click="closeModal(false)"> {{ handle == 'view' ? '返回' : '取消' }} </a-button>
      <a-button :loading="confirmLoading" v-if="handle != 'view'" key="submit" type="primary" @click="handleSubmit"> 发货 </a-button>
    </template>
  </a-modal>
</template>

<script>
  import deepCopy from '@/utils/deepCopy'
  import { findDictNameByValue,createOptionsByDict } from '@/utils/dict'

  export default {
    name: 'functionForm',
    props: {
      handle: { // 操作类型
        type: String,
        default: 'edit'
      },
      title: { // 弹窗标题
        type: String,
        default: ''
      },
      record: { // 选中行数据
        type: Object,
        default () {
          return {}
        }
      },
      visible: { // 是否显示弹窗
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        url: '/order/page', // 列表接口地址
        headParams: {}, // 请求头参数
        defaultParams: {
          orderStatus: 'ORDER_UN_ISSUE'
        }, // 默认携带参数
        currentRecord: {}, // 选中行数据
        infoVisible: false, // 弹窗是否显示
        form: this.$form.createForm(this, { name: "table_search" }), // 搜索表单
        columns: [
          {
            title: '订单编号',
            dataIndex: 'orderNo',
            key: 'orderNo'
          },
          {
            title: '商品订单编号',
            dataIndex: 'orderGoodsNo',
            key: 'orderGoodsNo'
          },
          {
            title: '商品名称',
            dataIndex: 'goodsName',
            key: 'goodsName',
            //align: 'center',
            customRender: (text, row) => {
              return <div class="product_td"><table-img src={row.goodsPicture}/><div class="product_name">{text}</div></div>
            }
          },
          {
            title: '价格/数量',
            dataIndex: 'goodsPrice',
            key: 'goodsPrice',
            customRender:(text,row)=>{
              let res = ''
              if(row.paymentWay==0 || row.paymentWay==1 || row.paymentWay == null) {
                res = text ? `¥ ${(+text / 100).toFixed(2)}/${row.goodsNum}件` : '¥ 0.00'
              } else if(row.paymentWay==2) {
                res = (text ? `¥ ${(+text / 100).toFixed(2)}` : '¥ 0.00')+'+'+row.integralPrice+'固定积分/'+row.goodsNum+'件'
              } else if(row.paymentWay==3) {
                res = row.integralPrice+'积分/'+row.goodsNum+'件'
              }
              return res;
            }
          },
          {
            title: '买家/收货人',
            dataIndex: 'userName',
            key: 'userName',
            //align: 'center',
            customRender: (text, row) => {
              return <div><p>{ text }件</p><p>{  row.provinceName }{  row.cityName }{  row.districtName }{  row.detailAddress }</p><p>{  row.userPhone }</p></div>
            }
          },
          {
            title: '配送方式',
            dataIndex: 'goodsDistribution',
            key: 'goodsDistribution',
            customRender:(text,row)=>{
              if (text == 1) {
                return "定点自提";
              } else if (text == 0) {
                return "快递配送";
              } else if (text == 2) {
                return "定点配送";
              }
              return "快递配送";
            }
          },
          {
            title: '实收金额(元)',
            dataIndex: 'goodsOrderPrice',
            key: 'goodsOrderPrice',
            customRender:(text,row)=>{
              let res = ''
              if(row.paymentWay==0 || row.paymentWay==1 || row.paymentWay == null) {
                res = text ? `¥ ${(+text / 100).toFixed(2)}` : '¥ 0.00'
              } else if(row.paymentWay==2) {
                res = (text ? `¥ ${(+text / 100).toFixed(2)}` : '¥ 0.00')+'+'+row.integralPrice+'固定积分'
              } else if(row.paymentWay==3) {
                res = row.integralPrice+'积分'
              }
              return res;
            }
          },
          // {
          //   title: '订单状态',
          //   dataIndex: 'orderStatus',
          //   key: 'orderStatus',
          //   customRender:(text,row)=>{
          //     let res = ''
          //     if (row.returnGoodsStatus == 'REFUND_FINISH') {
          //       res = "已关闭";
          //     } else {
          //       switch (text) {
          //         case "ORDER_UNPAID":
          //           res = "待付款";
          //         case "ORDER_CANCEL":
          //           res = "订单已取消"; // 已取消
          //         case "ORDER_UN_ISSUE":
          //           res = "待发货"; // 待发货
          //         case "ORDER_LEFT_WAIT":
          //           res = "待自提"; // 待自提
          //         case "ORDER_UN_RECEIVED":
          //           res = "待收货"; // 待收货
          //         case "ORDER_UN_EVALUATE":
          //           res = "待评价"; // 待评价
          //         case "ORDER_FINISH":
          //           res = "已完成"; // 已完成
          //       }
          //     }
          //     return res;
          //   }
          // },
          {
            title: '供应商名称',
            dataIndex: 'supplierName',
            key: 'supplierName',
            customRender:(text,row)=>{
              return text ? text : '自营商品';
            }
          },
        ],
        allSelectedRows: [], // 不同分页下被选中的表格行
        chosenIds: [], // 不同分页下被选中的表格行id集合
        confirmLoading: false, // 提交等待
      };
    },
    computed: {},
    watch: {
      // 监听弹窗显示，回显数据
      visible(value) {
        if (value && this.record.id) {
          this.$nextTick(()=> {})
        } else {
          this.resetData()
        }
      }
    },
    created() {},
    mounted() {},
    methods: {
      // 重置
      resetData(){},
      // 全部发货
      batchAll() {
        this.confirmLoading = true;
        setTimeout(() => {
          this.$emit('submit', data)
          this.confirmLoading = false;
          this.chosenIds = []
          this.allSelectedRows = []
        }, 3000)
      },
      // 表格单行选择
      rowSelectionSelect(record, selected) {
        if(!selected) {
          this.allSelectedRows.splice(this.allSelectedRows.findIndex(item => item.id == record.id), 1)
          this.chosenIds.splice(this.chosenIds.findIndex(item => item == record.id), 1)
        }
      },
      // 表格任意行发生选择或取消选择时回调
      rowSelectionChange(selectedRowKeys, selectedRows) {
        let _this = this
        if(selectedRows.length > 0) {
          selectedRows.forEach(item => {
            if(!_this.chosenIds.includes(item.id)) {
              _this.chosenIds.push(item.id)
              _this.allSelectedRows.push(item)
            }
          })
          selectedRowKeys = this.chosenIds
          this.$refs.searchtable.selectedRowKeys = this.chosenIds
        } else {
          this.$refs.searchtable.dataSource.forEach(dataItem => {
            if(_this.chosenIds.includes(dataItem.id)) {
              _this.allSelectedRows.splice(_this.allSelectedRows.findIndex(item => item.id == dataItem.id), 1)
              _this.chosenIds.splice(_this.chosenIds.findIndex(item => item == dataItem.id), 1)
            }
          })
        }
      },
      // 提交
      handleSubmit() {
        let _this = this,data={}
        this.confirmLoading = true;
        console.log(_this.$refs.searchtable.selectedRowKeys)
        setTimeout(() => {
          this.$emit('submit', data)
          this.confirmLoading = false;
          this.chosenIds = []
          this.allSelectedRows = []
        }, 3000)
        
      },
      // 取消
      closeModal(bool) {
        this.$emit('cancel', bool)
      }
    }
  };
</script>

<style lang="less" scoped>
.product_td{
  display: flex;
  align-items: center;
  .product_name{
    margin-left:6px;
  }
}
</style>
